import React, { Component } from 'react'
import { Table, Form, Button, Select, DatePicker } from 'antd';
import moment from 'moment';
import { connect } from "react-redux";
import { removeEmptyField } from '../../compoent/emptyFild'


const { RangePicker } = DatePicker;
const { Option } = Select;


class ShowUserAcc extends Component {

    constructor(props) {
        super(props);
        this.state = {
            data: [],
            pageNum: 1,
            pageSize: 10,
            userName: '',
            email: '',
            gender: '',
            phone: '',
            startTime: '',
            endTime: '',
            visible: false,
            // title: [],
            newValues: {},
            type: [
                {
                    name: '订单消费',
                    id: '0'
                },
                {
                    name: '余额充值',
                    id: '1'
                },
                {
                    name: '提现',
                    id: '2'
                },
                {
                    name: '订单取消-退回',
                    id: '3'
                },
                {
                    name: '完成订单',
                    id: '4'
                },

            ],
            // mId: ''
        }


        this.columns = [
            {
                title: '订单编号',
                dataIndex: 'tradeNo',
            },
            {
                title: '用户名称',
                dataIndex: 'nickName',
            },
            {
                title: '类型',
                dataIndex: 'tips',
            },

            {
                title: '账变前余额',
                dataIndex: 'beforeMoney',
            },
            {
                title: '变动金额',
                dataIndex: 'money',
            },
            {
                title: '平台扣减',
                dataIndex: 'companyGet',
            },
            {
                title: '账变后余额',
                dataIndex: 'afterMoney',
            },
            {
                title: '时间',
                dataIndex: 'date',
            },

        ];
    }
    onFinish = (values) => {
        if (values.beginTme) {
            const beginTime = values.beginTme
            values.beginTme = moment(beginTime[0]).format('YYYY-MM-DD')
            values.endTime = moment(beginTime[1]).format('YYYY-MM-DD')
        }


        if (values) {

            values.pageNo = 1
            values.pageSize = 10
            values.mId = this.props.record.id
            const newValues = removeEmptyField(values)
            this.setState({ newValues })
            this.props.accBalanceLog(newValues)
        } else {
            this.props.accBalanceLog()
        }
    };

    onFinishFailed = (errorInfo) => {

    };
    componentDidMount() {
        this.init()
    }
    init = () => {
        const { accBalanceLog } = this.props
        accBalanceLog({ pageNo: 1, pageSize: 10, mId: this.props.record.id })
    }

    handleChangeAccList = (current, pageSize) => {
        const { newValues } = this.state

        newValues.pageNo = current
        newValues.pageSize = 10
        newValues.mId = this.props.record.id
        this.props.accBalanceLog({ ...newValues })
        // this.props.accBalanceLog({ pageNo: current, pageSize: 10, mId: this.props.record.id })
    }


    handleCancel = () => {
        this.setState({
            visible: false,
        })

    }
    render() {
        const { balanceData } = this.props;
        const { type } = this.state
        // const { pageNum, pageSize, visible, title } = this.state;
        //
        const pagination = {
            current: balanceData.current,//当前页
            total: balanceData.total,//总条数
            pageSize: balanceData.size,//页大小
            onChange: this.handleChangeAccList,
            showQuickJumper: true,//快速跳转
            showSizeChanger: false//大于50时显示pageSize切换器
        };
        return (
            <div>
                <Form
                    name="basic"
                    // labelCol={{ span: 8 }}
                    // wrapperCol={{ span: 16 }}
                    initialValues={{ remember: true }}
                    onFinish={this.onFinish}
                    onFinishFailed={this.onFinishFailed}
                    autoComplete="off"
                    layout='inline'

                >
                    <Form.Item
                        label="类型："
                        name="type"
                        style={{ width: 200 }}
                    >
                        <Select
                            showSearch
                            placeholder='请选择类型'
                        // style={{ marginLeft:10}}
                        // placeholder=""

                        >
                            {type.map((item) => (
                                <Option key={item.id} value={item.id}>
                                    {item.name}
                                </Option>
                            ))}
                        </Select>


                    </Form.Item>

                    <Form.Item
                        // style={{ marginRight: 40 }}
                        label="时间："
                        name="beginTme"
                    // rules={[{ message: 'Please input your username!' }]}
                    >
                        <RangePicker
                            ranges={{
                                // Today: [moment(), moment()],
                                '本周': [moment().startOf('week'), moment().endOf('week')],
                                '本月': [moment().startOf('month'), moment().endOf('month')],
                            }} />

                    </Form.Item>


                    <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                        <Button type="primary" htmlType="submit">
                            查询
                        </Button>
                    </Form.Item>
                    <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                        <Button type="primary" htmlType="reset">
                            重置
                        </Button>
                    </Form.Item>
                </Form>
                <Table columns={this.columns} dataSource={balanceData.records} rowKey={record => record.id} pagination={pagination}
                />


            </div>
        );
    }
}
const mapState = state => ({
    ...state.users

});

const mapDispatch = dispatch => ({
    ...dispatch.users
})

export default connect(mapState, mapDispatch)(ShowUserAcc);